<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			body {
				background-image: url(images/background/bg_starrysky.png);
				background-size: 100%;
				width: 100%;
				overflow: hidden;
			}
			
			img.star {
				width: 8%;
				transition: all 2s ease-in-out;
				position: fixed;
			}
			
			#stars {
				height: 80%;
			}
			
			#start {
				width: 295px;
				height: 50px;
				background: rgba(255, 199, 19, 1);
				border-radius: 30px;
			}
			
			#start span {
				width: 40px;
				height: 28px;
				font-size: 20px;
				font-weight: 500;
				color: rgba(84, 75, 45, 1);
				line-height: 28px;
			}
			
			#next-btn {
				position: fixed;
				top: 85%;
				width: 100%;
			}
			#memorial{
				display: none;
				position: fixed;
				left: 40px;
				top: 40px;
			}
			#photo {
				display: inline-block;
				width: 100px;
				height: 100px;
				border-radius: 50px;
				border: #EFEFF4 2px solid;
				overflow: hidden;
			}
			
			#photo img {
				width: 100%;
				height: 100%;
			}
			
			#footer {
				margin-top: -98px;
			}
			.detail{
				margin-top: -32px;
				margin-left: 15px;
			}
			.detail img{
				position: relative;
				top: 3px;
			}
			#footer .detail,#footer .detail span{
				color: white;
				line-height: 24px;
			}
		</style>
	</head>

	<body>
		<div id="stars">

		</div>

		<div align="center" id="next-btn">
			<button id="start"><span>进入</span></button>
		</div>

		<div id="memorial">
			<div id="photo">
				<img src="" id="photo-header" />
			</div>
			<div id="footer">
				<img src="images/photos/bg_headphoto@2x.png" width="100px"/>
				<div class="detail">
					<img src="images/photos/star_message@2x.png" width="20px" /> X <span id="num"></span>
				</div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>

		<script type="text/javascript">
			mui.init();
			var $ = mui;
			var app = window.app;
			var user = localStorage.getItem('user');
			if(user == undefined) {
				$.openWindow({
					url: 'login.html',
					id: 'longin',
					show: {
						aniShow: 'pop-in'
					}
				});
			} else {
				user = JSON.parse(user);
				$.ready(function() {
					loadMemorials();
					setInterval(floatStars, 2000);
				})
			}


			function addPhotosEnvent(){
				$('#stars').on('tap', '.star', function() {
					var memorial  = document.getElementById("memorial");
					var photoHeader  = document.getElementById("photo-header");
					var starNum  = document.getElementById("num");
					var star = this;
					memorial.style.display = "inline-block";
					memorial.style.left = (star.attributes.x -20) + "px"; 
					memorial.style.top = (star.attributes.y - 20) + "px"; 
					photoHeader.src = app.config.host + "/static-files" + star.attributes.photo.value; 
					starNum.innerText = star.attributes.num.value; 
					
				});
			}

			function loadMemorials() {
				app.memorials(user, function(data) {
					addMemorialsToStars(data);
					randomStars();
					addPhotosEnvent();
				}, function() {

				});
			}

			function randomX() {
				return Math.floor(Math.random() * (window.screen.width * 0.8));
			}

			function randomNum() {
				return Math.floor(Math.random() * 2);
			}

			function randomY() {
				return Math.floor(Math.random() * (window.screen.height * 0.8));
			}

			function addMemorialsToStars(data) {
				var memorials = data.content;
				var memorialsDiv = $("#stars")[0];
				for(var i = 0; i < memorials.length; i++) {
					var memorial = memorials[i];
					if(memorial)
						var memoralsHtml = getMemorialHtml(i % 4,memorial.photo,memorial.history_starlight);
					memorialsDiv.innerHTML = memorialsDiv.innerHTML + memoralsHtml;
				}

			}

			function getMemorialHtml(level,photo,starNum) {
				var memorialHtml = '';
				switch(level) {
					case 0:
						memorialHtml = '<img src="images/stars/star_level_01@2x.png" photo="' + photo + '"  num="' + starNum +'" class="star" />';
						break;
					case 1:
						memorialHtml = '<img src="images/stars/star_level_02@2x.png" photo="' + photo + '"  num="' + starNum +'" class="star" />';
						break;
					case 2:
						memorialHtml = '<img src="images/stars/star_level_03@2x.png" photo="' + photo + '"  num="' + starNum +'" class="star" />';
						break;
					case 3:
						memorialHtml = '<img src="images/stars/star_level_04@2x.png" photo="' + photo + '"  num="' + starNum +'" class="star" />';
						break;
					default:
						memorialHtml = '<img src="images/stars/star_level_01@2x.png" photo="' + photo + '"  num="' + starNum +'" class="star" />';
						break;
				}
				return memorialHtml;
			}

			function randomStars() {
				var stars = document.getElementsByClassName("star");
				for(var i = 0; i < stars.length; i++) {
					var star = stars[i];
					var x = randomX();
					var y = randomY();
					star.style.left = x + 'px';
					star.style.top = y + 'px';

					star.attributes.x = x;
					star.attributes.y = y;

					if(i % 2 == 0) {
						star.style.width = '8%'
					} else {
						star.style.width = '10%'
					}
				}
			}

			function floatStars() {
				var stars = document.getElementsByClassName("star");
				var distance = 1;
				for(var i = 0; i < stars.length; i++) {
					var star = stars[i];

					var x = star.attributes.x;
					var y = star.attributes.y;

					var num = randomNum();
					if(num > 0 && x < (window.screen.width * 0.8)) {
						x += distance;

					} else if(x > (window.screen.width * 0.2)) {
						x -= distance;
					}
					star.style.left = x + 'px';
					star.attributes.x = x;

					num = randomNum();
					if(num > 0 && y < (window.screen.height * 0.8)) {
						y += distance;
					} else if(y > (window.screen.height * 0.2)) {
						y -= distance;
					}
					star.style.top = y + 'px';
					star.attributes.y = y;
				}

			}
			
			
			$('#next-btn').on('tap', '#start', function() {
				$.openWindow({
						url: 'main.html',
						id: 'main',
						show: {
							aniShow: 'pop-in'
						}
					});

			});
		</script>
	</body>

</html>